<template>
  <div class="choose-video">
    <div class="e-nav-bar">
      <div class="e-flex-y-center e-flex-between">
        <van-icon class="e-nav-bar__back" name="arrow-left" size="24" @click="onClickLeft" />
        <div class="e-color-primary e-p-5 e-mr-10" @click="confirm">确定</div>
      </div>
      <div class="e-nav-bar__title e-flex-y-center e-flex-between">
        <div class="e-f-24 e-bold">关联视频</div>
      </div>
    </div>
    <div style="height:90px;"></div>
    <van-search class="e-pb-5 e-search" v-model="name" placeholder="搜一搜" @search="search" />
    <div class="choose-video-list e-pl-15 e-pr-15 e-pb-15">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
        <van-checkbox-group v-model="videoIds">
          <div v-for="n in list" :key="n.id" class="choose-video-item e-pt-15">
            <van-checkbox :name="n.id" shape="square">{{n.name||'视频名称'}}</van-checkbox>
            <!-- <div class="e-f-18 e-color-666 e-bold">{{n.name||'视频名称'}}</div> -->
            <van-divider style="width:100%;border-color:#E1E1E1;margin:15px 0 0;" />
          </div>
        </van-checkbox-group>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getVideoList } from '@/api/video'
export default {
  components: {},

  props: {
    orgIds: {
      type: [Number, String],
      default: '',
    },
  },

  data() {
    return {
      tabId: 1,
      name: '',
      list: [],
      pageIndex: 0,
      pageSize: 20,
      loading: false,
      finished: false,
      show: false,
      videoIds: [],
    }
  },

  computed: {},

  watch: {
    orgIds(val) {
      this.videoIds = []
      if (val) {
        this.search()
      }
    },
  },

  created() {
    this.search()
  },

  mounted() {},

  methods: {
    confirm() {
      this.$emit('change', {
        value: this.videoIds.join(','),
        name: this.list
          .filter((n) => {
            return this.videoIds.indexOf(n.id) > -1
          })
          .map((n) => {
            return n.name
          })
          .join(','),
      })
      this.$emit('close')
    },
    search() {
      this.pageIndex = 0
      this.finished = false
      this.getList()
    },
    getList() {
      if (!this.orgIds) return
      this.loading = true
      getVideoList({
        organizationId: this.orgIds,
        videoName: this.name,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        queryType: 1,
      })
        .then(({ data, total }) => {
          if (this.pageIndex == 0) {
            this.list = data
          } else {
            this.list = this.list.concat(data)
          }
          this.pageIndex++
          this.loading = false
          this.finished = this.list.length >= total
        })
        .catch(() => {
          this.loading = false
        })
    },
    onClickLeft() {
      this.$emit('close')
    },
  },
}
</script>
<style lang='scss'>
.choose-video {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: #fff;
  &-list {
    position: fixed;
    top: 150px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
  }
  &-item {
  }
}
</style>